<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>分页效果</title>
	<style>
	    html,body{
	    	height: 100%;
            margin:0;
            padding:0;
            background: #eee;
	    }
        #container{
        	width: 80%;
            height: 65%;
        	margin:0 auto;
        	position: relative;
        }
        #content{
        	width: 80%;
        	margin: 0 auto;
        }
        #content>div{
            padding:1%;
            border:1px solid #555;
            overflow: hidden;
            margin-top:10px;
            background: #fff;
        }
        #content>div.visible{
            display: block;
        }
        #content img{
        	width:20%;
        	height: 100px;
        	float:left;
        }
        #content p{
        	float: left;
        	width: 60%;
            padding:1%;
            word-break:break-all;
        }

        #control{
        	width: 100%;
        	position: absolute;
        	bottom:-47px;
        	text-align: center;

        }
        #control a{
        	color:blue;
        	display: inline-block;
        	width: 30px;
        	height: 30px;
        	text-align: center;
        	line-height: 30px;
        	text-decoration: none;

        }
        #control a:hover{
        	color: red;
        }
        #control a.active{
        	background: red;
        	color:#ddd;
        }
        #control a.button{
            width: 60px;
        }
        #control a.disable{
            color:#000;
            cursor: text;
        }
        #page-index{
        	display: inline-block;
        }
	</style>
</head>
<body>
	<div id="container">
		<div id="content">
     
		</div>
		<div id="control">
		    <a id="first" class="button disable" href="#">首页</a>
			<a id="prev" class="button disable" href="#">上一页</a>
			<div id="page-index" >
				<!-- <a class="active" data-page="1" href="#">1</a>
                                <a href="#" data-page="2">2</a> -->
			</div>
			<a id="next" class="button" href="#">下一页</a>
			<a id="last" class="button" href="#">尾页</a>
		</div>
	</div>
    <script src="js/jquery.min.js"></script>
	<script src="js/pagination.js"></script>
	<script>
       $("#container").pagination({
       	     'num':5
       });
	</script>
</body>
</html>